<!-- 个人中心 -->
<template>
  <el-dialog title="个人设置" :visible.sync="visible" v-loading.fullscreen.lock="loading" :close-on-click-modal="false" :modal-append-to-body='false' width="600px">
    <el-tabs tab-position="left">
      <el-tab-pane label="基本设置">
        <el-form ref="form" :model="form" :rules="rules" label-position="top">
          <el-form-item label="Avatar" prop="avatar">
            <el-avatar :size="70" :src="avatar"></el-avatar>
            <el-upload name="avatar" :on-success="handleAvatarSuccess" :action="'/api/user/'+form.userId+'/avatar'" 
              :show-file-list="false" accept="image/jpeg,image/png,image/jpg,image/icon">
              <el-button ref="avatarUpload" size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="昵称" prop="username">
            <el-input placeholder="请输入内容" v-model="form.username" size="medium" class="wl-input" />
          </el-form-item>
          <el-form-item prop="oprator">
            <el-button @click="updateUserInfo()" type="primary">更新基本信息</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="安全设置">
        <el-form ref="safeform" :model="safeform" :rules="rules" label-position="top">
          <el-form-item label="重置密码" prop="password">
            <el-input type="password" placeholder="请输入密码" v-model="safeform.password" size="medium" class="wl-input" />
          </el-form-item>
          <el-form-item label="再输入密码" prop="password2">
            <el-input type="password" placeholder="请再次输入密码" v-model="safeform.password2" size="medium" class="wl-input" />
          </el-form-item>
          <el-form-item prop="oprator">
            <el-button @click="updateUserPassword()" type="primary">重置密码</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import { updateUserGeneralInfo, updateUserPassword } from '@/api/user'

export default {
  name: 'Profile',
  data() {
    var checkPwd = (rule, value, callback) => {    // 密码验证规则
      const regpwd = /^(\w){6,20}$/      // 6-20个字母、数字、下划线
      const regpwd2 = /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)[a-zA-Z\d]*$/  // 必须包含大写字母，小写字母，数字，特殊字符: /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[#@*&.])[a-zA-Z\d#@*&.]*$/
      if (regpwd.test(value) && regpwd2.test(value)) {
        return callback()
      }
      return callback(new Error('至少6个字符，至少1个大写字母，1个小写字母和1个数字'))
    }
    var checkPwd2 = (rule, value, callback) => {    // 密码验证规则
      return (value === this.safeform.password) ? callback() : callback(new Error('再次输入的密码不一致'))
    }
    return {
      loading: false,
      visible: false,
      form: { //基本设置表单
        userId: '',
        username: '',
        avatar: ''
      },
      safeform: {
        password: '',
        password2: '',
      },
      rules: {
        username: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: checkPwd, trigger:"blur" }
        ],
        password2: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: checkPwd2, trigger:"blur" }
        ]
      }
    }
  },
  computed: {
    avatar: function() {
      return "/static/assets" + this.form.avatar
    }
  },
  mounted() {
    //
  },
  created() {
    // init the default selected tab
  },
  methods: {
    openDialog() {
      this.form.avatar = this.$store.getters.user.avatar
      this.form.username = this.$store.getters.user.username
      this.form.userId = this.$store.getters.user.user_id
      this.safeform.password = ''
      this.safeform.password2 = ''
      this.visible = true
    },
    handleAvatarSuccess(res, file) {
      if (res.code !== 0) {
        this.$message({ type:'error', message:(res.message) })
        return
      }
      let data = res.data
      this.form.avatar = data.avatar
      this.$message({ type:'success', message:'上传成功!' })
    },
    updateUserInfo() { // 更新用户基本信息
      this.$refs.form.validate((valid) => {
        if (valid) {
          updateUserGeneralInfo(this.form.userId, this.form.username, this.form.avatar).then(response => {
            this.loading = false
            if (!response.data || response.data.code !== 0) {
              this.$message({ type:'error', message:(response.data && response.data.message) ? response.data.message:'请求数据异常！' })
              return
            }
            this.$store.dispatch('user/getInfo')
            this.$message({ type:'success', message:'修改成功！' })
            this.visible = false
          }).catch(error => {
            this.loading = false
            this.$message({ type:'error', message:'请求异常！'})
            console.log(error)
          })
        } else {
          return false;
        }
      })
    },
    updateUserPassword() { // 重置密码
      this.$refs.safeform.validate((valid) => {
        if (valid) {
          updateUserPassword(this.form.userId, this.safeform.password).then(response => {
            this.loading = false
            if (!response.data || response.data.code !== 0) {
              this.$message({ type:'error', message:(response.data && response.data.message) ? response.data.message:'请求数据异常！' })
              return
            }
            this.$message({ type:'success', message:'重置密码成功！' })
            this.visible = false
          }).catch(error => {
            this.loading = false
            this.$message({ type:'error', message:'请求异常！'})
            console.log(error)
          })
        } else {
          return false;
        }
      })
    }
  }
}
</script>

<style scoped>
  .wl-input {
    width: 350px;
  }
</style>
